<template>
	<view class="swzjgl">
		<headertop title="生物制剂药物管理" str="orderlist" str1="oridei" :back1="back1"></headertop>
		<view class="swzjglback">

		</view>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>
		<view class="shengwuyaojiboxs">
			<view class="msgicon" v-if="!list.length">
				<image :src="_static('/images/wxnone.png')" mode="widthFix">
				</image>
				<view class="msgtext">
					暂无内容
				</view>
			</view>
			<view class="box" v-for="item in list">
				<view class="boxc">
					<view class="topnriobg">
						<image :src="_static('/images/Group 11685@2x.png')" class="zsimg" mode=""></image>
						<view class="texts">
							<view class="t1">
								{{item['name']}}
							</view>
							<view class="t2">
								剂量：{{item['dose']}}{{item.dose_unit}}
							</view>
						</view>
						<view class="gbox">
							<view class="btn">
								{{item['weight']}}kg
							</view>
						</view>
					</view>
					<view class="zhushedate">
						<span
							style="margin-top: 16rpx;">注射日期：{{timestampToHoursMinutes(item.injection_time*1000)}}</span>
						<view class="right1">
							<span style="color:#2ab4f5;margin-right: 20rpx;" @click="bj(item)">编辑</span>
							<span style="color: red;" @click="remove1(item)">删除</span>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 220rpx;">

			</view>
		</view>

		<view class="fixed">
			<view class="savebtn" @click="gopage()">
				添加
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import ulm, {
		$api
	} from '@/ulm';
	const statusBarHeight = ref('')
	const list = ref([])
	const total = ref(0)
	const barHeight = ref('')
	const back1 = ref('')
	const flag = ref(false)
	const quert = reactive({
		page: 1,
		list_rows: 10
	})
	onMounted(() => {

		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {

		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}

	})
	onReachBottom(() => {
		if (total.value > list.value.length) {
			quert['page']++
			init()
		}
	})
	onShow(() => {
		quert['page'] = 1
		list.value = []
		init()
	})

	function bj(item) {
		uni.setStorageSync('itemobj', item)
		uni.navigateTo({
			url: '/sub_index/index/add?id=' + item.id
		})
	}

	function remove1(item) {
		uni.showModal({
			title: '提示', // 标题（可选）
			content: '确定要删除吗？', // 内容（可选）
			confirmText: '确定', // 确认按钮文字（可选，默认“确定”）
			cancelText: '取消', // 取消按钮文字（可选，默认“取消”）
			success: (res) => {
				if (res.confirm) {
					remove(item)
					// 执行确定后的逻辑
				} else if (res.cancel) {

					// 执行取消后的逻辑
				}
			},
			fail: (err) => {

			}
		});
	}
	async function remove(item) {
		const res = await $api.delbiological({
			id: item.id
		})
		if (res.code == 1) {
			quert['page'] = 1
			list.value = []
			init()
			setTimeout(() => {
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				}, 500)
			})
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
	async function init() {
		const res = await $api.swlist(quert)
		if (res.code == 1) {
			list.value.push(...res.data.data)
			total.value = res.data.total
		}
	}

	function padStart(n) {
		return n.toString().padStart(2, 0)
	}

	function timestampToHoursMinutes(timestamp) {
		const date = new Date(timestamp)
		const year = date.getFullYear()
		const month = padStart(date.getMonth() + 1)
		const day = padStart(date.getDate())
		const house = padStart(date.getHours())
		const minuse = padStart(date.getMinutes())
		return ` ${year}-${month}-${day}  ${house}:${minuse}`;
	}

	function gopage() {
		uni.navigateTo({
			url: '/sub_index/index/add'
		})
	}
</script>


<style lang="scss">
	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: 30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	page {
		background: #F7F8FA;
	}

	.swzjgl {
		width: 100%;
		overflow: hidden;
		position: relative;

		.swzjglback {
			width: 100%;
			height: 450rpx;
			background: linear-gradient(180deg, #CAEEFF 71%, rgba(240, 250, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			z-index: -1;
		}

		.fixed {
			width: 100%;
			background: #FFFFFF;
			overflow: hidden;
			position: fixed;
			bottom: 0%;
			box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(0, 0, 0, 0.03);

			.savebtn {
				width: 686rpx;
				height: 82rpx;
				background: #2AB4F5;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-align: center;
				line-height: 82rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: auto;
				margin-top: 32rpx;
				margin-bottom: 80rpx;
			}
		}

		.shengwuyaojiboxs {
			width: 686rpx;
			margin: auto;
			margin-top: 32rpx;
			overflow: hidden;

			.box {
				width: 686rpx;
				height: 216rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(0, 0, 0, 0.06);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				overflow: hidden;
				margin-bottom: 28rpx;

				.boxc {
					width: 630rpx;
					margin: auto;

					.zhushedate {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						height: 72rpx;
						width: 100%;
						overflow: hidden;
						line-height: 60rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #86909C;

						.right1 {
							display: flex;
							align-items: center;
							font-size: 24rpx;
						}
					}

					.topnriobg {
						width: 100%;
						height: 144rpx;
						display: flex;
						align-items: center;
						position: relative;
						border-bottom: 2rpx solid #F2F3F5;

						.zsimg {
							width: 88rpx;
							height: 88rpx;
						}

						.gbox {
							width: 96rpx;
							position: absolute;
							height: 88rpx;
							right: 0%;

							.btn {
								width: 96rpx;
								height: 40rpx;
								background: #E8F3FF;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								text-align: center;
								line-height: 40rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 24rpx;
								color: #2AB4F5;
							}
						}

						.texts {
							margin-left: 16rpx;
							width: 400rpx;
							overflow: hidden;

							.t1 {
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #1D2129;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.t2 {
								font-weight: 400;
								font-size: 24rpx;
								color: #4E5969;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								margin-top: 24rpx;
							}
						}
					}
				}
			}
		}
	}
</style>